// 引入一个包
const path = require('path');  // 用于拼接路径

// 引入 HTML 插件
const HTMLWebPackPlugin = require("html-webpack-plugin");

// 引入clean插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

// webpack 中的所有配置信息，都应该存储在module.exports中
module.exports = {
    // 开发模式
    // mode: 'development',
    // 生产模式，会进行压缩
    mode: 'production',
    // 指定入口文件
    entry: "./src/index.ts",

    // 指定打包文件所在目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后的文件
        filename: "bundle.js",

        // 配置打包环境（告诉webpack不适用箭头函数）
        environment: {
            arrowFunction: false,
        }

    },
    // 指定webpack打包时要使用的模块
    module: {
        // 指定加载的规则(加载器执行循序是从后往前)
        rules: [
            /* 
                test 规则生效的文件
                use 使用什么加载器处理符合要求的文件，多个加载器使用数组，从后往前使用加载器进行加载
                exclude 排除的文件或者文件夹等
                配置 babel的加载器 ，先用ts的加载器把ts转换为js，然后把新的js转换为老版本的js，所以ts加载器在后面
            */
            {
                // test 指定规则生效的文件（以正则表达式方式书写）
                test: /\.ts$/,  // 匹配所有以 .ts 结尾的文件
                // 加载使用loader(加载器执行循序是从后往前)
                // "babel-loader  控制生成的JS代码版本
                // use: ["babel-loader", "ts-loader"],
                use: [
                    // 配置babel
                    {
                        // 指定加载器
                        loader: "babel-loader",
                        // 设置babel
                        options: {
                            // 设置预设环境
                            presets: [
                                [
                                    // 设置指定环境
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 设置需要兼容浏览器版本
                                        targets: {
                                            "chrome": "58",
                                            "ie": "11",
                                        },
                                        /* 
                                            下面两个配置是很重要的，比如我们使用了promise，但是在ie中很明显是没有这个新特性的，也不支持的
                                            那么如果下面的配置没有进行配置，babel是不会帮我们进行转换为ie能识别的代码的
                                            当我们配置了以后，babel就会把自己实现的promise引入到生成的文件中，就可以使用promise了
                                            指定用哪个版本的core-js，是我们安装的第三方模块
                                         */
                                        // 指定core-js运行版本
                                        "corejs": "3",
                                        // 使用coreJs的方式（"usage" 表示按需加载）
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ],
                        }
                    },
                    "ts-loader"],
                // 排除node_modules下的文件（以正则表达式方式书写）
                exclude: /node-modules/,
            }
        ]
    },

    // 配置webpack插件
    plugins: [
        // 引入插件 每次打包前先清理一次资源。这个插件每次都会清空生成的文件，所以必须放在最上方，每次旧文件删除，然后新文件在产生
        new CleanWebpackPlugin(),
        // 引入插件（自动生成html文件，并插入相关js、css等资源）
        new HTMLWebPackPlugin({
            // title: '这是一个自定义标题',
            template: "./src/index.html",  // 引入模板网页
        }),
    ],

    // 配置模块，用来配置引用模块，那些文件可以作为模块被其他文件引入
    resolve: {
        // extensions 文件拓展名。以 .ts 或 .js 结尾的文件都可以作为模块引入
        extensions: ['.ts', '.js']
    }

}
